<template>
    <div class="download-content">
        <div class="download-header">
            <div class="w1200">
                <div class="download-title">
                    绿通云产品体验及下载中心
                </div>
                <div class="download-desc">
                    丰富的营销活动，灵活的功能设置，绝佳的产品体验
                </div>
                <!-- 平台切换标签 -->
                <div class="platform-tabs">
                    <div class="w1200">
                        <div class="tabs-container">
                            <div v-for="(platform, index) in platforms" :key="index" class="tab-item"
                                :class="{ 'active': activeTab === index }" @click="switchTab(index)">
                                <div class="tab-icon">
                                    <img :src="activeTab === index ? platform.activeIcon : platform.icon" alt="" />
                                </div>
                                <span class="tab-name">{{ platform.key }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content-area">
            <div class="w1200">
                <div class="content-container">
                    <div class="content-slider" :style="{ transform: `translateX(-${activeTab * 100}%)` }">
                        <div v-for="(platform, index) in platforms" :key="index" class="content-item">
                            <div class="platform-content">
                                <div class="left-info">
                                    <h2 class="platform-title">{{ platform.name }}</h2>
                                    <ul class="feature-list">
                                        <li v-for="feature in platform.features" :key="feature">
                                            {{ feature }}
                                        </li>
                                    </ul>
                                    <div class="download-section">
                                        <div class="qr-code">
                                            <img :src="platform.qrCode" alt="" />
                                        </div>
                                        <div class="download-info">
                                            <div class="download-btn" @click="downloadClient(index)">
                                                {{ index === 2 || index === 3 ? '微信扫一扫' : index === 4 ? '立即访问' :
                                                    '立即下载' }}
                                            </div>
                                            <div class="version-info">
                                                <span v-if="index === 2 || index === 3">当前版本:</span>
                                                {{ platform.version }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right-preview">
                                    <div :class="(index === 2 || index === 3) ? 'device-mockup1' : 'device-mockup'">
                                        <img :src="platform.preview" alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

// 当前激活的标签索引
const activeTab = ref(0) // 默认选中iOS

// 平台数据配置
const platforms = ref([
    {
        key: 'Win学员端',
        name: 'Windows版学员端',
        icon: 'https://image.lutongjiakao.com/system/5d74b91b6d884d3da97b1c7f8a97bfac.png',
        activeIcon: 'https://image.lutongjiakao.com/system/e57785b314c848ae908b23630135ece6.png',
        version: '下载密码：gbxg',
        features: [
            '支持Win11、Win10、Win8、Win7（64位）等操作系统'
        ],
        qrCode: 'https://image.lutongjiakao.com/system/02f3c17d3c8d4305baded00efd5563a3.png',
        preview: 'https://image.lutongjiakao.com/system/8d8c1c7f451c4fd982b1d18b3f41e26d.png',
    },
    {
        key: 'Win驾校端',
        name: 'Windows版驾校端',
        icon: 'https://image.lutongjiakao.com/system/5c8b2c263411429383e2fbf7de3f0645.png',
        activeIcon: 'https://image.lutongjiakao.com/system/89600991f6354a36810fd7bc72ce9436.png',
        version: '下载密码：fo7m',
        features: [
            '支持Win11、Win10、Win8、Win7（64位）等操作系统'
        ],
        qrCode: 'https://image.lutongjiakao.com/system/0ed5468a103447d89ac0956e87fa9023.png',
        preview: 'https://image.lutongjiakao.com/system/b50f7f741a604003b1a9a76ce2c7f331.png',
    },
    {
        key: '微信小程序',
        name: '微信小程序',
        icon: 'https://image.lutongjiakao.com/system/e8134be0c09944edba59c69ad131e27c.png',
        activeIcon: 'https://image.lutongjiakao.com/system/6f17bddccafe4dc893822f510c16265a.png',
        version: 'V1.0.0',
        features: [
            '微信搜索小程序“绿通驾考”',
            '内容数据仅做为演示'
        ],
        qrCode: 'https://image.lutongjiakao.com/system/bf205ac139bb4c87a03687082a50be45.jpg',
        preview: 'https://image.lutongjiakao.com/system/aa242f59d3aa47e8b3e50044b5698412.png',
    },
    {
        key: '微信公众号',
        name: '微信公众号',
        icon: 'https://image.lutongjiakao.com/system/9cdb88d9951a420a82cbe4c8a2077180.png',
        activeIcon: 'https://image.lutongjiakao.com/system/b3a8e619d97146f7923f147566282f07.png',
        version: 'V1.0.0',
        features: [
            '微信搜索公众号“绿通云科技”',
            '内容数据仅做为演示'
        ],
        qrCode: 'https://image.lutongjiakao.com/system/063c103947d541a3ae92a4b8f892c52f.jpg',
        preview: 'https://image.lutongjiakao.com/system/fc982b2add2c4190b76a8c20ef14be37.jpg',
    },
    // {
    //     key: 'linux',
    //     name: 'Linux',
    //     icon: 'https://image.lutongjiakao.com/system/e9bc7358a64e403f95285660473fd30a.png',
    //     activeIcon: 'https://image.lutongjiakao.com/system/53cc4f589f8644e39244de95e25fa63d.png',
    //     version: 'V8.13.1',
    //     features: [
    //         '支持CentOS 7.0及以上、Ubuntu 18及以上操作系统'
    //     ],
    //     qrCode: '/images/qr-linux.png',
    //     preview: 'https://image.lutongjiakao.com/system/dd61d36b0a9340a999f09194b1382346.png',
    // },
    {
        key: '驾校网页端',
        name: '驾校网页端',
        icon: 'https://image.lutongjiakao.com/system/6ebfd511a5e94df7844ffaa60fdb664d.png',
        activeIcon: 'https://image.lutongjiakao.com/system/85834aadf83e414fb6e21cb706f18c1b.png',
        version: '如需了解更多请扫描左边微信二维码咨询',
        features: [
            '驾校端网页体验地址：https://www.lutongjiakao.com/admin/#/login',
            '体验账号：13888888888',
            '登录密码：联系下方客服获取密码'
        ],
        qrCode: 'https://image.lutongjiakao.com/system/ffa8ebce3f1e4d5b868d73d87854c426.png',
        preview: 'https://image.lutongjiakao.com/system/30eca8f0b5204f9c939526376924a422.png'
    }
])

// 切换标签
const switchTab = (index: number) => {
    activeTab.value = index
}

// 下载客户端
const downloadClient = (index: any) => {
    if (index === 0) {
        window.open('https://lutongyun.lanzoub.com/iUncj36zsx9a')
    } else if (index === 1) {
        window.open('https://lutongyun.lanzoub.com/imkFT36zswxi')
    } else if (index === 4) {
        window.open('https://www.lutongjiakao.com/admin/#/login')
    }
}
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.download-content {
    background: #fff;
}

.download-header {
    width: 100%;
    height: rem(315);
    padding-top: rem(50);
    background: linear-gradient(90deg, rgb(240, 231, 247) 0%, rgb(241, 249, 253) 49.48%, rgb(216, 245, 234) 100%);
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.download-title {
    font-weight: 700;
    font-size: rem(30);
    line-height: 60px;
    margin: rem(46) auto 4px;
    color: rgb(33, 33, 33);
    text-align: center;
}

.download-desc {
    font-size: rem(15);
    line-height: 1.5;
    color: rgb(135, 135, 135);
    text-align: center;
}

// 平台切换标签样式
.platform-tabs {
    margin-top: rem(97);
}

.tabs-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: rem(10) rem(10);
    border-radius: rem(12) rem(12) 0 0;
    cursor: pointer;
    gap: rem(10);

    &.active {
        background: #fff;
    }
}

.tab-icon {
    width: rem(32);
    height: rem(32);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.tab-name {
    font-size: rem(14);
    font-weight: 500;
    color: #333;
    text-align: center;
}

.tab-item.active .tab-name {
    color: #11c871;
}

// 内容区域样式
.content-area {
    padding: rem(90) 0;
    background: #fff;
}

.content-container {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.content-slider {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    align-items: center;
}

.content-item {
    flex: 0 0 100%;
    width: 100%;
}

.platform-content {
    display: flex;
    align-items: center;
    // padding: 0 rem(60) rem(60);
    gap: rem(60);
}

.left-info {
    flex: 1;
    max-width: rem(500);
}

.platform-title {
    font-size: rem(32);
    font-weight: 500;
    color: #333;
    margin-bottom: rem(5);
    line-height: 1.2;
}

.feature-list {
    padding: 0;
    margin: 0 0 rem(30) 0;
    list-style: disc inside;

    li {
        position: relative;
        margin-bottom: rem(2);
        font-size: rem(11);
        color: #666;
        line-height: 1.5;
    }
}

.download-section {
    display: flex;
    align-items: center;
    gap: rem(30);
}

.qr-code {
    width: rem(120);
    height: rem(120);
    // border: rem(1) solid #e0e0e0;
    // border-radius: rem(8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    // overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.download-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: rem(16);
}

.download-btn {
    background: rgb(17, 200, 113);
    color: #fff;
    border: none;
    /* 设置固定宽度 */
    width: rem(120);
    padding: rem(6) 0;
    border-radius: rem(4);
    font-size: rem(12);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 rem(4) rem(12) rgba(40, 167, 69, 0.3);
    text-align: center;
}

.version-info {
    font-size: rem(11);
    color: #999;
    text-align: center;
}

.right-preview {
    flex: 1;
    display: flex;
    align-items: center;
}

.device-mockup {
    width: rem(490);
    height: rem(258);

    img {
        width: 100%;
        height: 100%;
    }
}

.device-mockup1 {
    width: rem(300);
    height: rem(330);

    img {
        width: 100%;
        height: 100%;
    }
}
</style>